<template>
	<el-container>
		<el-header>
			<Header></Header>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<Aside></Aside>
			</el-aside>
			<el-main>
				<h3 style="text-align:center;">欢迎使用</h3>
				<table width="98%" border="0" class="table table-bordered">
					<tbody>
						<tr>
							<td colspan="2" align="center">系统信息</td>
						</tr>
						<tr>
							<td align="right">操作系统</td>
							<td>{{ php_os }}</td>
						</tr>
						<tr>
							<td align="right">时区</td>
							<td>{{ timezone }}</td>
						</tr>
						<tr>
							<td align="right">php版本</td>
							<td>{{ php_version }}</td>
						</tr>
						<tr>
							<td align="right">mysql版本</td>
							<td>{{ mysql_version }}</td>
						</tr>
					</tbody>
				</table>
			</el-main>
		</el-container>
		<el-footer>
			<Footer></Footer>
		</el-footer>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				php_os: "",
				timezone: "",
				php_version: "",
				mysql_version: ""
			};
		},
		async mounted() {
			let data = await this.$axios.post("/api/home/main");
			this.php_os = data.data.php_os;
			this.timezone = data.data.timezone;
			this.php_version = data.data.php_version;
			this.mysql_version = data.data.mysql_version;
		},
		methods: {}
	};
</script>

<style scoped>
	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
	}

	.el-main {
		
		color: #333;
		
	}
</style>
